<template>
<div class="custom-search">
  <el-form ref="form" :model="form" label-width="80px" size="mini">
    <div class="flex" size="mini">
      <el-form-item :label="$t('km.batchNo')">
        <el-input v-model="form.batchNo"></el-input>
      </el-form-item>
      <el-form-item :label="$t('km.importState')">
        <el-select  v-model.trim="form.flag" >
          <el-option
            v-for="item in states"
            :key="item.value"
            :value="item.value"
            :label="item.label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('km.createTime')">
        <el-date-picker
          v-model.trim="form.createTime"
          :id="['kmTime1', 'kmTime2']"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width:400px"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label-width="20px">
        <el-button type="primary" class="primary_btn" @click.stop="search('search')">{{$t('public.search2')}}</el-button>
        <span @click.stop="search" class="refresh"><i class="iconfont icon-shuaxin"></i></span>
      </el-form-item>
    </div>
  </el-form>
  <div class="table-wrap">
    <common-table :tableHead="tableHead" :data="tableData" :limit="10" :pagination="pagination" @operate="operate" @turnPage="search">
    </common-table>
  </div>
</div>
</template>
<script>
  import CommonTable from '../config/robotConfig/base/CommonTable.vue'
  export default {
    name: 'ExportTask',
    data () {
      return {
        pagination: {
          currentPage: 0,
          count: 0,
          totalPage: 0
        },
        states: [
        // "importLoadding":"等待处理",
        // "importWorking":"处理中",
        // "importSuccess":"完成",
        // "importError":"失败",
          {value: '', label: this.$t('public.all')},
          {value: 'start', label: this.$t('km.importLoadding')},
          {value: 'import', label: this.$t('km.importWorking')},
          {value: 'finish', label: this.$t('km.importSuccess')},
          {value: 'failure', label: this.$t('km.importError')}
        ],
        form: {
          batchNo: '',
          createTime: [],
          flag: ''
        },
        searchObj: {
          page: 1,
          limit: 10
        },
        tableData: [],
        tableHead: [
          {prop: 'batchNo', label: this.$t('km.batchNo')},
          {prop: 'batchRemark', label: this.$t('km.batchNoMark')},
          {prop: 'num', label: this.$t('km.improtSum')},
          {prop: 'statusName', label: this.$t('km.importState')},
          {prop: 'createAgent', label: this.$t('km.createAgent')},
          {prop: 'updateTime', label: this.$t('km.createTime')},
          {prop: 'operate', label: this.$t('public.operate'), special: 'operateContent'}
        ]
      }
    },
    components: {
      CommonTable
    },
    methods: {
      operate (event) {
        let type = event.type
        let data = event.val
        if (type === 'delete') {
          this.delete({_id: data._id})
        }
      },
      delete (data) {
        this.$confirm(this.$t('business.businessDeleteTip'), this.$t('public.delete'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        })
          .then(() => {
            this.$store.dispatch('removeKmImport', data)
              .then(resp => {
                if (resp.success) {
                  this.search()
                  this.$message({
                    type: 'success',
                    message: this.$t('message.deleteSucc')
                  })
                }
              })
          })
      },
      search (page) {
        if (typeof page === 'number') {
          // 翻页
          this.searchObj.page = page
        } else if (page === 'search') {
          // 查询
          this.searchObj.page = 1
          let [beginTime, endTime] = this.form.createTime || []
          this.searchObj.beginTime = beginTime || ''
          this.searchObj.endTime = endTime || ''
          this.searchObj.batchNo = this.form.batchNo
          this.searchObj.flag = this.form.flag
        }
        this.$store.dispatch('getKmImportList', this.searchObj).then((res) => {
          this.tableData = []
          if (res.success) {
            this.pagination.count = res.count
            this.pagination.currentPage = this.searchObj.page
            let list = res.list || []
            for (let i = 0; i < list.length; i++) {
              let one = list[i]
              let agents = this.$agentsMap() || {}
              let createAgent = agents[one.creator] || {}
              one.createAgent = createAgent.displayName
              one.operate = []
              this.states.some((item) => {
                if (item.value === one.flag) {
                  one.statusName = item.label
                  return true
                }
              })
              if (one.flag === 'failure' || one.flag === 'finish') {
                // 导入失败或完成可以删除
                one.operate = [{name: this.$t('public.delete'), type: 'delete', class: 'delete'}]
              }
            }
            this.tableData = list
          }
        })
      }
    },
    beforeMount () {
      this.$store.dispatch('getCache', {type: 'agents'}).then(() => {
        this.search()
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .custom-search
    height calc(100vh - 53px)
    overflow auto
  .refresh
    color $c-main
    display inline-block
    padding-left 10px
    cursor pointer
  .table-wrap
    padding 10px 20px
  .flex
    display flex
    flex-wrap wrap
    padding-top 20px
</style>
